<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单表单示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-top: 10px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户信息表单</h1>
        <form action="/submit-form" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" required placeholder="请输入您的姓名">

            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" required placeholder="请输入您的邮箱">

            <label for="phone">电话：</label>
            <input type="tel" id="phone" name="phone" placeholder="请输入您的电话号码">

            <label for="message">留言：</label>
            <textarea id="message" name="message" rows="5" placeholder="请输入您的留言"></textarea>

            <button type="submit">提交</button>
        </form>
    </div>
</body>
</html> -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的HTML页面示例。</p>
    <button onclick="alert('你好！')">点击我</button>
</body>
</html>

<!-- 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>稍微复杂的网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #333;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }
        nav {
            background-color: #444;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-around;
        }
        nav a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
            font-size: 16px;
        }
        nav a:hover {
            background-color: #555;
            border-radius: 5px;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .content {
            display: flex;
            justify-content: space-between;
        }
        .content img {
            max-width: 40%;
            height: auto;
            border-radius: 10px;
        }
        .content .text {
            width: 55%;
            padding: 10px;
        }
        .form {
            margin-top: 20px;
        }
        .form input, .form button {
            padding: 10px;
            margin: 5px 0;
            width: 100%;
            font-size: 16px;
        }
        .form button {
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
        }
        .form button:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的个人网站</h1>
    </header>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于我</a>
        <a href="#">我的作品</a>
        <a href="#">联系我</a>
    </nav>
    <div class="container">
        <div class="content">
            <img src="https://via.placeholder.com/400x300" alt="示例图片">
            <div class="text">
                <h2>欢迎来到我的网站</h2>
                <p>这是一个稍微复杂一些的HTML页面示例，包含导航栏、图片、文本内容和表单。你可以根据自己的需求进行修改和扩展。</p>
                <p>这里可以添加更多内容，比如介绍自己的项目、技能或者兴趣爱好。</p>
            </div>
        </div>
        <div class="form">
            <h3>联系我</h3>
            <form>
                <input type="text" placeholder="你的名字" required>
                <input type="email" placeholder="你的邮箱" required>
                <textarea rows="5" placeholder="你的消息" style="width: 100%; padding: 10px; margin: 5px 0; font-size: 16px;"></textarea>
                <button type="submit">发送消息</button>
            </form>
        </div>
    </div>
    <footer>
        <p style="text-align: center; padding: 10px; background-color: #333; color: white; margin-top: 20px;">
            © 2025 我的个人网站
        </p>
    </footer>
</body>
</html> -->

<!-- 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂静态网页示例</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        /* 导航栏样式 */
        nav {
            background-color: #333;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        nav ul li {
            display: inline-block;
            margin: 0 15px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 16px;
        }
        nav ul li a:hover {
            text-decoration: underline;
        }

        /* 轮播图样式 */
        .carousel {
            position: relative;
            max-width: 100%;
            margin: 20px auto;
            overflow: hidden;
        }
        .carousel img {
            width: 100%;
            display: block;
        }
        .carousel-indicators {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }
        .carousel-indicators button {
            background-color: rgba(255, 255, 255, 0.5);
            border: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        /* 内容区域样式 */
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .content .box {
            width: 30%;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .content .box h3 {
            margin-top: 0;
        }

        /* 表单样式 */
        .form {
            margin-top: 20px;
        }
        .form input, .form textarea {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form button {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
        }
        .form button:hover {
            background-color: #555;
        }

        /* 页脚样式 */
        footer {
            text-align: center;
            padding: 10px;
            background-color: #333;
            color: white;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>

    <!-- 轮播图 -->
    <div class="carousel">
        <img src="https://via.placeholder.com/1200x400?text=Slide+1" alt="Slide 1">
        <img src="https://via.placeholder.com/1200x400?text=Slide+2" alt="Slide 2" style="display: none;">
        <img src="https://via.placeholder.com/1200x400?text=Slide+3" alt="Slide 3" style="display: none;">
        <div class="carousel-indicators">
            <button onclick="showSlide(0)" class="active"></button>
            <button onclick="showSlide(1)"></button>
            <button onclick="showSlide(2)"></button>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="container">
        <h2 id="home">欢迎来到我的网站</h2>
        <p>这是一个复杂的静态网页示例，包含轮播图、多栏布局和表单。</p>
        <div class="content">
            <div class="box">
                <h3>服务 1</h3>
                <p>这里可以添加服务的详细描述。</p>
            </div>
            <div class="box">
                <h3>服务 2</h3>
                <p>这里可以添加服务的详细描述。</p>
            </div>
            <div class="box">
                <h3>服务 3</h3>
                <p>这里可以添加服务的详细描述。</p>
            </div>
        </div>
        <div class="form">
            <h3 id="contact">联系我们</h3>
            <form>
                <input type="text" placeholder="你的名字" required>
                <input type="email" placeholder="你的邮箱" required>
                <textarea rows="5" placeholder="你的消息" required></textarea>
                <button type="submit">发送消息</button>
            </form>
        </div>
    </div>

    <footer>
        <p>© 2025 我的复杂静态网页</p>
    </footer>
</body>
</html> -->